import React from 'react'
import { Button, Form, Input, Select ,message } from 'antd';
import { useRef,useState } from 'react';
import api from '../../apis/user';

export default function AddAccount() {
  const formRef = useRef()
  const [loading,setLoading] = useState(false)
  const onFinish = (values) => {
    setLoading(true)
    api.AddAccount(values).then(res => {
      message.success("添加成功")
    }).catch(err=>{
      console.log(err);
    })
    formRef.current.resetFields()
    setLoading(false)
  };
  return (
    <div className='login addAccount'>
      <Form
        ref={formRef}
        name="control-ref"
        onFinish={onFinish}
        style={{ width: 400 }}
        initialValues={{
          userGroup:"普通管理员"
        }}
      >
        <Form.Item name="account" label="账号" rules={[{ required: true }]}>
          <Input placeholder='请输入账号' />
        </Form.Item>
        <Form.Item name="password" label="密码" rules={[{ required: true }]}>
          <Input placeholder='请输入密码' />
        </Form.Item>
        <Form.Item name="userGroup" label="角色" rules={[{ required: true }]}>
          <Select
            placeholder="请选择"
          >
            <Select.Option value="male">普通管理员</Select.Option>
            <Select.Option value="female">超级管理员</Select.Option>
          </Select>
        </Form.Item>
        
        <Form.Item>
          <Button style={{marginLeft:52}} type="primary" loading={loading} htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
